<!DOCTYPE html>
<!-- saved from url=(0831)http://rollupjs.org/#%7B%22options%22%3A%7B%22format%22%3A%22cjs%22%2C%22moduleName%22%3A%22myBundle%22%2C%22globals%22%3A%7B%7D%7D%2C%22modules%22%3A%5B%7B%22name%22%3A%22main.js%22%2C%22code%22%3A%22import%20%7B%20cube%20%7D%20from%20'.%2Fmaths.js'%3B%5Cnconsole.log(%20cube(%205%20)%20)%3B%20%2F%2F%20125%22%7D%2C%7B%22name%22%3A%22maths.js%22%2C%22code%22%3A%22%2F%2F%20This%20function%20isn't%20used%20anywhere%2C%20so%5Cn%2F%2F%20Rollup%20excludes%20it%20from%20the%20bundle...%5Cnexport%20function%20square%20(%20x%20)%20%7B%5Cn%5Ctreturn%20x%20*%20x%3B%5Cn%7D%5Cn%5Cn%2F%2F%20This%20function%20gets%20included%5Cnexport%20function%20cube%20(%20x%20)%20%7B%5Cn%5Ct%2F%2F%20rewrite%20this%20as%20%60square(%20x%20)%20*%20x%60%5Cn%5Ct%2F%2F%20and%20see%20what%20happens!%5Cn%5Ctreturn%20x%20*%20x%20*%20x%3B%5Cn%7D%22%7D%5D%7D -->
<html manifest="/auto.appcache"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>rollup.js</title>

	<link rel="icon" type="image/png" href="http://rollupjs.org/images/favicon.png">

	<!-- CodeMirror styles -->
	<link rel="stylesheet" href="codemirror.css" media="screen" title="no title" charset="utf-8">

	<!-- our styles -->
	<link rel="stylesheet" href="min.css">
	<link rel="stylesheet" href="fontello.css">
<style type="text/css">/* Ractive.js component styles */

/* {1} */
.expanded[data-ractive-css~="{1}"], [data-ractive-css~="{1}"] .expanded {height:auto}.collapsed[data-ractive-css~="{1}"], [data-ractive-css~="{1}"] .collapsed {height:4em}

/* {2} */
.module[data-ractive-css~="{2}"], [data-ractive-css~="{2}"] .module {margin:0 0 1em;border:1px solid #f4f4f4}header[data-ractive-css~="{2}"], [data-ractive-css~="{2}"] header {width:100%;border-bottom:1px solid #f4f4f4}.main-module[data-ractive-css~="{2}"], [data-ractive-css~="{2}"] .main-module {border:1px solid #ccc}.entry-module-name[data-ractive-css~="{2}"], [data-ractive-css~="{2}"] .entry-module-name {display:block;padding:.5em}.entry-module-label[data-ractive-css~="{2}"], [data-ractive-css~="{2}"] .entry-module-label {color:#999}button[data-ractive-css~="{2}"], [data-ractive-css~="{2}"] button {position:absolute;top:0;right:0;font-family:inherit;font-size:inherit;padding:.5em;background-color:transparent;border:none;color:#e94c43;cursor:pointer;outline:0;opacity:.4;-webkit-transition:opacity .2s;transition:opacity .2s}button[data-ractive-css~="{2}"]:active, [data-ractive-css~="{2}"] button:active, button[data-ractive-css~="{2}"]:hover, [data-ractive-css~="{2}"] button:hover {opacity:1}button  .label[data-ractive-css~="{2}"], button  [data-ractive-css~="{2}"] .label, button[data-ractive-css~="{2}"]  .label, [data-ractive-css~="{2}"] button  .label {position:absolute;right:100%;opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}button:active  .label[data-ractive-css~="{2}"], button:active  [data-ractive-css~="{2}"] .label, button[data-ractive-css~="{2}"]:active  .label, [data-ractive-css~="{2}"] button:active  .label, button:hover  .label[data-ractive-css~="{2}"], button:hover  [data-ractive-css~="{2}"] .label, button[data-ractive-css~="{2}"]:hover  .label, [data-ractive-css~="{2}"] button:hover  .label {opacity:.6}.icon-cancel[data-ractive-css~="{2}"], [data-ractive-css~="{2}"] .icon-cancel {font-size:.8em}textarea[data-ractive-css~="{2}"], [data-ractive-css~="{2}"] textarea {width:100%;height:100px}

/* {3} */
strong[data-ractive-css~="{3}"], [data-ractive-css~="{3}"] strong {line-height:2}.new-module[data-ractive-css~="{3}"], [data-ractive-css~="{3}"] .new-module {display:block;width:100%;color:#3D9970;border:none;padding:1em;margin-bottom:0}button[data-ractive-css~="{3}"], [data-ractive-css~="{3}"] button {float:right}

/* {4} */
button[data-ractive-css~="{4}"], [data-ractive-css~="{4}"] button, label[data-ractive-css~="{4}"], [data-ractive-css~="{4}"] label, section  code[data-ractive-css~="{4}"], section  [data-ractive-css~="{4}"] code, section[data-ractive-css~="{4}"]  code, [data-ractive-css~="{4}"] section  code {display:block}.options[data-ractive-css~="{4}"], [data-ractive-css~="{4}"] .options {margin:0 0 1em;border:1px solid #eee}table[data-ractive-css~="{4}"], [data-ractive-css~="{4}"] table {width:100%;border-spacing:0}td[data-ractive-css~="{4}"], [data-ractive-css~="{4}"] td {width:1%;padding:0;font-size:.8em}button[data-ractive-css~="{4}"], [data-ractive-css~="{4}"] button {width:100%;height:100%;padding:1em 0}.selected[data-ractive-css~="{4}"], [data-ractive-css~="{4}"] .selected {background-color:#ccc;font-weight:700}section[data-ractive-css~="{4}"], [data-ractive-css~="{4}"] section {border-bottom:1px solid #eee}section[data-ractive-css~="{4}"]:last-child, [data-ractive-css~="{4}"] section:last-child {border:none}h3[data-ractive-css~="{4}"], [data-ractive-css~="{4}"] h3 {padding:.5rem;margin:0;font-size:1em;font-weight:900}label[data-ractive-css~="{4}"], [data-ractive-css~="{4}"] label {padding:0 0 0 8em}input[data-ractive-css~="{4}"], [data-ractive-css~="{4}"] input {padding-left:1.5em}section  code[data-ractive-css~="{4}"], section  [data-ractive-css~="{4}"] code, section[data-ractive-css~="{4}"]  code, [data-ractive-css~="{4}"] section  code {position:absolute;right:0;top:1px;padding:.5em .5em .5em 1.5em;line-height:1}

/* {5} */
.status[data-ractive-css~="{5}"], [data-ractive-css~="{5}"] .status {padding:.5em;margin:0 0 1em;color:#fff}.success[data-ractive-css~="{5}"], [data-ractive-css~="{5}"] .success {background-color:#3D9970}.error[data-ractive-css~="{5}"], [data-ractive-css~="{5}"] .error {background-color:#e94c43}.status> span[data-ractive-css~="{5}"], .status> [data-ractive-css~="{5}"] span, .status[data-ractive-css~="{5}"]> span, [data-ractive-css~="{5}"] .status> span {font-size:1em}

/* {6} */
.bundle[data-ractive-css~="{6}"], [data-ractive-css~="{6}"] .bundle {border:1px solid #eee}</style></head>

<body>
	<header>
	<a class="logo" href="http://rollupjs.org/"></a>
	<h1>rollup.js <small class="version">v0.25.4</small></h1>
	<small>the next-generation JavaScript module bundler</small>

	<div class="links">
		<a class="guide" href="http://rollupjs.org/guide">guide</a> /
		<a class="wiki" target="_blank" href="https://github.com/rollup/rollup/wiki">wiki</a> /
		<a class="github" target="_blank" href="https://github.com/rollup/rollup">github</a>
	</div>
</header>


	<section class="blurb">
		<div class="block">
			<h2>What is this?</h2>
			<p>Rollup is a next-generation JavaScript module bundler. Author your app or library using ES2015 modules, then efficiently bundle them up into a single file for use in browsers and Node.js – even if you use advanced features like <a href="https://github.com/rollup/rollup/wiki/Bindings">bindings</a> and <a href="https://github.com/rollup/rollup/wiki/Cycles">cycles</a>.</p>
		</div>

		<div class="block">
			<h2>So, like Browserify?</h2>
			<p>Yes, except that the resulting bundle is always smaller than the Browserify or Webpack equivalent, because ES2015 modules are inherently more efficient than CommonJS modules. You can even eliminate unused library code with <em>tree-shaking</em>.</p>
		</div>

		<div class="block">
			<h2>Tree-shaking?</h2>
			<p>Normally if you <code>require</code> a module, you import the whole thing. ES2015 lets you just import the bits you need, without mucking around with custom builds. It's a revolution in how we use libraries in JavaScript, and it's happening right now.</p>
		</div>

		<div class="block">
			<h2>Sounds great!</h2>
			<p>Visit <a href="https://github.com/rollup/rollup">github.com/rollup/rollup</a> for installation instructions and more information.</p>

			<a class="cta" href="https://github.com/rollup/rollup">Get started on GitHub&nbsp;»</a>
		</div>
	</section>

	<main>
		<div class="left">
			<h2>ES2015 modules go in...</h2>
			<div class="input"><header data-ractive-css="{3}" class="start-here clearfix"> <select><option disabled="">Select an example...</option> <option value="[object Object]" selected="">Tree-shaking
</option><option value="[object Object]">Default exports
</option><option value="[object Object]">Named exports
</option><option value="[object Object]">External imports
</option><option value="[object Object]">Static namespaces
</option><option value="[object Object]">Dynamic namespaces
</option></select> <button>Start over</button></header> <article data-ractive-css="{3} {2}" class="module main-module"><header><span class="entry-module-name">main.js <span class="entry-module-label">(entry module)</span></span></header> <textarea style="display: none;">import { cube } from './maths.js';
console.log( cube( 5 ) ); // 125</textarea><div class="CodeMirror cm-s-default CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 4px; left: 0px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" style="position: absolute; padding: 0px; width: 1000px; height: 1em; outline: none;" tabindex="0"></textarea></div><div class="CodeMirror-vscrollbar" cm-not-content="true" style="display: block; bottom: 17px;"><div style="min-width: 1px; height: 152px;"></div></div><div class="CodeMirror-hscrollbar" cm-not-content="true" style="display: block; right: 17px; left: 30px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true" style="display: block; height: 17px; width: 17px;"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 30px; margin-bottom: -17px; border-right-width: 13px; padding-right: 17px; padding-bottom: 17px;"><div style="position: relative;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure">AخA</div><div class="CodeMirror-measure"><pre class="CodeMirror-line"><span style="padding-right: 0.1px;"><span class="cm-keyword">import</span> { <span class="cm-def">cube</span> } <span class="cm-keyword">from</span> <span class="cm-string">'./maths.js'</span>;</span></pre></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-cursors"><div class="CodeMirror-cursor" style="left: 4px; top: 0px; height: 23.5px;">&nbsp;</div></div><div class="CodeMirror-code"></div></div></div></div></div><div style="position: absolute; height: 13px; width: 1px;"></div><div class="CodeMirror-gutters"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 29px;"></div></div></div></div></article><article data-ractive-css="{3} {2}" class="module "><header><input class="module-name" placeholder="foo.js" value="maths.js"> <button class="remove"><span class="label">remove</span> <span class="icon-cancel"></span></button></header> <textarea style="display: none;">// This function isn't used anywhere, so
// Rollup excludes it from the bundle...
export function square ( x ) {
	return x * x;
}

// This function gets included
export function cube ( x ) {
	// rewrite this as `square( x ) * x`
	// and see what happens!
	return x * x * x;
}</textarea><div class="CodeMirror cm-s-default CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 4px; left: 0px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" style="position: absolute; padding: 0px; width: 1000px; height: 1em; outline: none;" tabindex="0"></textarea></div><div class="CodeMirror-vscrollbar" cm-not-content="true" style="display: block; bottom: 17px;"><div style="min-width: 1px; height: 704px;"></div></div><div class="CodeMirror-hscrollbar" cm-not-content="true" style="display: block; right: 17px; left: 30px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true" style="display: block; height: 17px; width: 17px;"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 30px; margin-bottom: -17px; border-right-width: 13px; padding-right: 17px; padding-bottom: 17px;"><div style="position: relative;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"><pre class="CodeMirror-line"><span style="padding-right: 0.1px;"><span class="cm-comment">// This function isn't used anywhere, so</span></span></pre></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-cursors"><div class="CodeMirror-cursor" style="left: 4px; top: 0px; height: 23.5px;">&nbsp;</div></div><div class="CodeMirror-code"></div></div></div></div></div><div style="position: absolute; height: 13px; width: 1px;"></div><div class="CodeMirror-gutters"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 29px;"></div></div></div></div></article><button data-ractive-css="{3}" class="new-module"><span class="icon icon-plus"></span> add module</button></div>
		</div>
		<div class="right">
			<h2>...bundle comes out</h2>
			<div class="output"><div data-ractive-css="{5}" class="status success"><span><span class="icon icon-ok"></span> Rollup successful!</span></div> <div data-ractive-css="{4}" class="options"><section><h3>options.format</h3> <table><tr><td><button class="">AMD</button></td><td><button class="selected">CommonJS</button></td><td><button class="">ES2015</button></td><td><button class="">Globals</button></td><td><button class="">UMD</button></td></tr></table></section>  </div> <div data-ractive-css="{6}" class="bundle"><div class="CodeMirror cm-s-default CodeMirror-wrap" style="height: 100%;"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 4px; left: 0px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" style="position: absolute; padding: 0px; width: 1000px; height: 1em; outline: none;" tabindex="0"></textarea></div><div class="CodeMirror-vscrollbar" cm-not-content="true" style="display: block; bottom: 17px;"><div style="min-width: 1px; height: 464px;"></div></div><div class="CodeMirror-hscrollbar" cm-not-content="true" style="display: block; right: 17px; left: 30px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true" style="display: block; height: 17px; width: 17px;"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 30px; margin-bottom: -17px; border-right-width: 13px; padding-right: 17px; padding-bottom: 17px;"><div style="position: relative;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"><pre class="CodeMirror-line"><span style="padding-right: 0.1px;"><span class="cm-string">'use strict'</span>;</span></pre></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-cursors"><div class="CodeMirror-cursor" style="left: 4px; top: 0px; height: 23.5px;">&nbsp;</div></div><div class="CodeMirror-code"></div></div></div></div></div><div style="position: absolute; height: 13px; width: 1px;"></div><div class="CodeMirror-gutters"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 29px;"></div></div></div></div></div></div>
		</div>
	</main>

	<!-- CodeMirror JS -->
	<script async="" src="analytics.js"></script><script src="codemirror.js"></script>
	<script src="javascript.js"></script>

	<!-- Ractive -->
	<script src="ractive.js"></script>

	<!-- Rollup and app -->
	<script src="rollup.browser.js"></script>
	<script src="app.js"></script>

	<!-- Google Analytics -->
	<script>
		(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
		(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
		m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
		})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

		ga('create', 'UA-5602942-9', 'auto');
		ga('send', 'pageview');
	</script>


</body></html>